<template>
  <el-select v-bind="$attrs" v-on="$listeners" :value="value" @change="handleItemChange">
    <el-option
      v-for="item in tableData"
      :key="item.datum_repay_list_id"
      :label="item.pay_time"
      :value="item.datum_repay_list_id"
    >
      <span style="float: left">{{ item.pay_time }}</span>
      <span style="float: right; color: #8492a6; font-size: 13px">
        {{ sub(item.capital, item.repay_funds_total) }} 元
      </span>
    </el-option>
  </el-select>
</template>

<script>
import { sub } from '@vimi/utils-tool'
export default {
  components: {},
  props: {
    value: {
      type: String,
      default: '',
    },
    queryId: String,
  },
  data() {
    return {
      sub,
      tableData: [],
      loading: false,
      tableName: 'datum_repay_list_view_new',
    }
  },
  computed: {},
  watch: {
    queryId: {
      handler: function () {
        this.getData()
      },
      immediate: true,
    },
  },
  created() {},
  mounted() {},
  methods: {
    getData() {
      if (!this.queryId) {
        return
      }
      this.loading = true
      this.$api
        .getData(
          this.$serviceName,
          this.tableName,
          { 'customer_related_id.eq': this.queryId },
          { pay_time: 'asc' }
        )
        .then(res => {
          this.tableData = res?.data ?? []
          this.$nextTick(() => {
            const select =
              this.tableData.find(item => item.datum_repay_list_id === this.value) || {}
            this.$emit('getFunds', sub(select.capital, select.repay_funds_total))
          })
        })
        .finally(() => {
          this.loading = false
        })
    },
    handleItemChange(val) {
      const select = this.tableData.find(item => item.datum_repay_list_id === val) || {}
      this.$emit('select', select)
    },
  },
}
</script>

<style scoped></style>
